<template>
	<view class="count poRel">
		<view class="wid100 poAbs" style="height: 775rpx;background: linear-gradient(#e9ffe4, #F6F6F6);top: 0;z-index: 1;"></view>
		<view class="poFix wid100" style="background: #e9ffe4;top: 0;z-index: 11;">
			<!-- 状态栏高度 -->
			<view :style="{ height: `${statusBarHeight}px` }"></view>
			<!-- 自定义导航栏高度 并 居中 -->
			<view class="dis disAl disJuC poRel" :style="{height: `${barHeight}px`}">
				<view class="poAbs" style="width: 32rpx;height: 32rpx;left: 22rpx;" @click="fanhui()">
					<image src="../../../static/fanhui.png" class="wh100"></image>
				</view>
				<view class="foSi35" style="line-height: 36rpx;">兑换码</view>
			</view>
		</view>
		<view :style="{ height: `${statusBarHeight+barHeight}px` }"></view>
		<scroll-view :style="{ height: `calc(100vh - ${statusBarHeight+barHeight}px)` }" style="z-index: 2;" 
			class="wid100 poRel" scroll-y="true" @scrolltolower="lower">
			<view style="height: 1rpx;"></view>
			<view v-if="list.length == 0" class="wid90 mar fowe800 foSi35">
				<view style="height: 50rpx;"></view>
				<view class="dis disJuC">
					<image src="../../../static/zanwu.png" style="width: 400rpx;height: 300rpx;"></image>
				</view>
				<view class="textCen mar-top20" style="color: #868686;">暂无数据</view>
			</view>
			<block v-for="(item,index) in list" :key="index">
				<view class="wid90 mar poRel dis disAl mar-top30"
					:style="'background-image: url('+(item.status == 0?urlImage+'/wechatimg/linshi4.png':urlImage+'/wechatimg/linshi3.png')+');'" 
					style="height: 212rpx;box-sizing: border-box;background-size: 100% 100%;">
					<view class="wid90 mar">
						<view class="dis disAl">
							<view class="wid80 foSi50 fowe800" style="line-height: 40rpx;">{{item.codes}}</view>
							<view v-if="item.status == 0" class="dis disAl disJuC foSi20 borRad40" @click="util.fz(item.codes)"
								style="border: 1rpx solid #BFBFBF;width: 128rpx;height: 40rpx;color: #737373;">复制兑换码</view>
						</view>
						<view class="mar-top30 f26" style="color: #737373;">有效期至2024-06-10</view>
					</view>
				</view>
			</block>
			<view style="height: 50rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import utils from '@/common/utils';
	export default {
		name: 'redeemList',
		data() {
			return {
				statusBarHeight: 0,
				barHeight: 0,
				list: [],
				mygd: false,
				page: 1,
			}
		},
		async onLoad() {
			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 胶囊数据
			const {top,height} = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
			this.getList()
		},
		onShow() {},
		methods: {
			async getList(){
				let {
					data
				} = await this.util.request({
					'url': this.api.dhmlb,
					method: 'POST',
					data: {
						userId: uni.getStorageSync('userId'),
						// page: this.page,
						// size: 10
					}
				})
				// this.list = data
				console.log(data)
				this.list = this.list.concat(data)
				this.mygd = 10 > data.length
			},
			lower(e) {
				if(this.mygd){
					this.page++
					this.getList()
				}
			},
			fanhui(){
				uni.navigateBack(1)
			}
		},
	}
</script>
<style scoped lang="scss">
	.count {
		min-height: 100vh;
		background-color: #F6F6F6;
	}
</style>